<!DOCTYPE html> 
<html> 
<head> 
	<meta charset="utf-8"> 
	<title>Units</title> 
	<style>
		canvas{ position:absolute; }
		p{ position:absolute; bottom:0px; }
		.hide{ display:none; }
		
		._win{ position:absolute; top:100px; left:100px; z-index:1000; width:200px; height:200px; background:#777; }
	</style>
	<script src="../../lib/jquery/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script> 
	<script> 
		$( function(){
			
			var img = new Image();
			img.src = "big.png";
			
			var w = h = 50;
			var n = 100; //100			
			var inter = 125;
			t = 48;
			
			var ct = $("#ct");
			var ctx = $("<canvas>").attr( {
						width	: t * w,
						height	: t * h
					} ).css( "zIndex", 1 ).appendTo( ct )[ 0 ].getContext("2d");
			var canvas = ctx.canvas;
			var count = 0;
			
			var layers = 100;
			for (var i=0; i<layers; i++) {
				$("<div>").addClass("_win").appendTo( "body" )
					.css( "top", (i * 10) + "px" )
					.css("zIndex", 10000 + i ).html( (new Date()).getTime() );
			}
			
			
			setInterval( function(){
				
				//ctx.clearRect( 0, 0, t*w, t*h );
				
				//canvas.className = "hide";
				
				ctx.clearRect( 0, 0, 800, 600 );
				
				for (var i=0; i< n; i++) {
					var x = (i % w) * t, y = parseInt(i/ w) * t;
					
					ctx.drawImage( img, 0, 0, t, t, x, y, t, t );
				}
				
				//canvas.className = "";
				
			}, inter );
			
			
			
			
		} );
		

		
		
			
	</script> 
</head> 
<body id="canvasdemo"> 
	<div id="ct">
		
	</div>
	<p>
		n = 225, i =20, cpu = 28%
		图片的大小对于CPU影响不大
		<br/>
		n = 100, i =200, w=h =48, cpu = 5%
		<br/>
		n = 100, i =20, w=h =48, cpu = 5% <br/>
		n = 100, i =20, w=h =48, 增加clearRect hide -> show cpu = 50+%<br/>
		增加100个层对于效率并没有多大影响<br/>
	</p>	
</body> 
<script></script>
</html>